<template>
  <div class="cardTitle-box">
    <div />
    <div
      class="card"
      v-loading="loading">
      <div
        class="cardTitle"
        v-if="hasCheck">
        <span>组名：XXX产品线首营专用资质</span>
        <span class="total">
          组编号:SYFZ201904190001
        </span>
      </div>
      <div class="cardPage">
        <el-card
          class="licenceCard"
          v-for="i in 2"
          :key="'l'+i">
          <p class="licenceCardTitle">
            三类医疗器械经营许可证
          </p>
          <div class="licenceDetail">
            <img
              src="http://temp.im/174x120"
              alt="">
            <div>
              <p>
                <span>有效期从</span>
                <span>2017-01-01</span>
              </p>
              <p>
                <span>截止日期</span>
                <span>2017-01-01</span>
              </p>
              <p>
                <span>长期有效</span>
                <span>否</span>
              </p>
              <p>
                <span>证件编号</span>
                <span>8476598612786</span>
              </p>
              <p>
                <span>证件名称</span>
                <span>8476598612786</span>
              </p>
            </div>
          </div>
          <el-checkbox
            v-if="hasCheck"
            class="cardCheck"/>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Card',
  data () {
    return {
      checked: '',
      dialogVisible: false
    }
  },
  props: {
    hasCheck: {
      type: Boolean,
      default: true
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  mounted () {
    let obj = {
      type: 'btn',
      arr: [
        { type: '', val: '返回', handle: this.handlenBack },
        { type: 'primary', val: '更新', handle: this.handleUpdate }
      ]
    }
    this.$store.commit('changeLayoutHandle', obj)
  },
  methods: {
    open4 () {
      this.dialogVisible = true
    },
    handlenBack () {
    },
    handleUpdate () {
    }
  }
}
</script>
<style lang="less" scoped>
.cardTitle-box {
  .cardTitle {
    height: 40px;
    line-height: 40px;
    background: #eef0f5;
    padding-left: 10px;
    margin-bottom: 20px;

    .total {
      margin: 0 24px 0 12px;
    }
  }

  // 证件card样式
  .cardPage {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    align-content: flex-start;
    justify-content: start;

    .licenceCard {
      display: inline-block;
      width: 376px;
      border-radius: 0;
      box-shadow: initial;
      margin: 0 16px 20px 0;
      position: relative;

      .licenceCardTitle {
        margin-bottom: 24px;
      }

      .licenceDetail {
        display: flex;

        img {
          margin-right: 10px;
          width: 174px;
          height: 120px;
        }

        p span:first-child {
          color: #93a0b2;
          margin-right: 4px;
        }
      }
    }

    .cardCheck {
      position: absolute;
      right: 16px;
      top: 10px;
    }
  }
}

</style>
